<template>
  <header style="top: 0; touch-action: pan-y" v-bind:class="[isRegionActive ? 'region-active' : 'region-inactive']">
    <div class="top-bar grid-2000">
      <div class="grid-1122 clearfix">
        <div class="pull-right">
          <ul class="top-menu pull-left">
            <li class="topmenu-item topmenu-userinfo">潘长江</li>
            <li class="topmenu-item">
              <router-link to="/">请登录</router-link>
            </li>
            <li class="topmenu-item">
              <router-link to="/">免费注册</router-link>
            </li>
            <li class="topmenu-item">
              <router-link to="/">退出</router-link>
            </li>
            <li class="topmenu-item">
              <router-link to="/">我的交易单</router-link>
            </li>
            <li class="topmenu-item">
              <router-link to="/">会员中心</router-link>
            </li>
            <li class="topmenu-item">
              <router-link to="/">手机金融</router-link>
            </li>
            <li class="topmenu-item">
              <router-link to="/">联系我们</router-link>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <main-menu></main-menu>
  </header>
</template>

<script>
  import { mapGetters } from 'vuex'
  import MainMenu from './MainMenu'
  export default {
    components: {
      MainMenu
    },
    name: 'header-bar',
    data: function () {
      return {
        isProfileActive: false
      }
    },
    computed: {
      ...mapGetters([
        'username',
        'isLogin'
      ])
    },
    methods: {
      handleLogout () {
        this.$http.post('/logout').then((response) => {
          if (response.data.code === 200) {
            this.$store.dispatch('destroyUser')
            this.$router.replace({ path: '/login' })
          } else {
            this.$Message.error('退出失败')
          }
        })
      }
    }
  }
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
  @import '../../static/css/header.css';
</style>
